<template>
	<u-form :model="formData" ref="form" label-width="200rpx">
		<u-form-item label="会员名称:" prop="memberName" required>
			<u-input v-model="formData.memberName" :disabled="formData.memberId"></u-input>
		</u-form-item>
		<u-form-item label="会员编号:" prop="memberCode" required>
			<u-input v-model="formData.memberCode" :disabled="formData.memberId"></u-input>
		</u-form-item>
		<u-form-item label="手机号:" prop="phone" required>
			<u-input type="number" v-model="formData.phone" :disabled="formData.memberId" placeholder="请填写手机号"></u-input>
		</u-form-item>
		<u-form-item label="余额:" prop="balance" required>
			<u-input type="number" v-model="formData.balance" placeholder="请填写余额"></u-input>
		</u-form-item>
		<u-form-item label="开通线下月结:" prop="allowMonthSettle" v-show="userPinia.allowMonthSettle">
			<u-radio-group v-model="formData.allowMonthSettle">
				<u-radio :name="1">是</u-radio>
				<u-radio :name="0">否</u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item label="关联商户:" prop="businessIds">
			<view class="selected-wrapper" @click="showBusinessListPopup">
				<view class="selected-business">
					<template v-if="!selectedBusinesses.length">
						<text style="color:#C0C4CC">选择关联商户</text>
					</template>
					<template v-else>
						<view class="selected-item" v-for="(item,index) in selectedBusinesses" :key="item.id"
							@click.stop="delBusiness(item)">
							{{item.name}}
							<u-icon name="close-circle"></u-icon>
						</view>
					</template>
				</view>
				<view @click.stop="delBusiness()">
					<u-icon name="close-circle" v-show="selectedBusinesses.length"></u-icon>
				</view>

			</view>
		</u-form-item>
		<u-button class="submit-btn" @click="submit">点击提交</u-button>
		<u-popup v-model="showBusinessList" mode="bottom" :safe-area-inset-bottom="true">
			<view class="business-list_wrapper">
				<view class="business-top">
					<u-search placeholder="请输入商户名称"  v-model="keyword" :border="true" :clearable="true" @change="searchBusiness" :show-action="false"></u-search>
					<view class="icon">
						<u-icon name="close" @click="showBusinessList=false"></u-icon>
					</view>

				</view>
				<scroll-view :scroll-y="true" class="business-list">
					<u-checkbox-group>
						<u-checkbox :name="item.id" v-model="item.selected" v-for="item in filterBusinessList"
							:key="item.id">{{item.name}}</u-checkbox>
					</u-checkbox-group>
				</scroll-view>
			</view>
		</u-popup>
	</u-form>
</template>

<script setup lang="ts">
	import {
		reactive,
		ref,
		computed,
		unref,
	} from "vue"
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"
	import businessApi from "@/api/business"
	import memberApi from "@/api/member"
	import {bindingBean,debounce} from "@/utils"
	import userSotre from "@/store/user"
	const userPinia = userSotre()
	const form = ref(null)
	const formData = reactive({
		// memberId: "",
		memberName: "",
		memberCode: "",
		balance: "",
		phone:"",
		mainBusinessId: userPinia.shopId,
		allowMonthSettle: 0,
		relationBusinessIds: [],
	})
	const rules = reactive({
		memberName: [{
			required: true,
			message: "请填写会员名称"
		}],
		memberCode: [{
			required: true,
			message: "请填写会员编号"
		}],
		balance: [{
			required: true,
			message: "请填写余额",
		}],
		phone:[{
			required: true,
			message: "请填写手机号",
		}],
	})
	const businessList = ref([])
	const keyword = ref()//注意这里不能写null写空字符串或者不写都行，否则的话上面change会立即执行一次
	const showBusinessList = ref(false)

	// 已经选中的关联商户
	const selectedBusinesses = computed(() => {
		const arr = unref(businessList).filter(item => item.selected)
		formData.relationBusinessIds = arr.map(item => item.id)
		return arr
	})
	// 搜索过滤的商户
	const filterBusinessList = computed(() => unref(businessList).filter(item => !item.noShow))


	async function getData() {
		const {data} = await memberApi.getMemberDetail({id:formData.memberId})
		unref(businessList).forEach(item => data.relationBusinessList.some(item2=>item2.id==item.id) && (item.selected = true))
		bindingBean(formData, data)
	}
	// 获取可关联的商户列表
	async function getBusinessList() {
		const {data} = await businessApi.listRelationBusiness({businessId:formData.mainBusinessId})
		businessList.value = data || []
	}

	// 显示选择关联商户
	function showBusinessListPopup() {
		showBusinessList.value = true
	}

	// 搜索关联商户
	const searchBusiness = debounce(function (val = ""){
		unref(businessList).forEach(item => item.name.includes(val) ? (delete item.noShow) : item.noShow = true)
	},400)
	// 删除关联商户
	function delBusiness(val) {
		if (!val) return unref(businessList).forEach(item => item.selected = false)
		const target = unref(businessList).find(item => item.value == val.value)
		target.selected = false
	}
	// 提交
	async function submit() {
		let res = await unref(form).validate()
		if(!res)return
		res = await uni.showModal({
			title:"提示",
			content:"确定提交？"

		})
		if(!res.confirm)return

		!userPinia.allowMonthSettle&&(formData.allowMonthSettle = 0)
		if(formData.memberId){
			await memberApi.editMember(formData)
		}else{
			await memberApi.addMember(formData)
		}

		uni.navigateBack()

	}

	onLoad(async option => {
		await getBusinessList()
		if (option.id) {
			formData.memberId = option.id
			console.log(formData)
			getData()
		}

	})
	onReady(() => {
		unref(form).setRules(rules)
	})
</script>

<style lang="scss" scoped>
	::-webkit-scrollbar {
		display: none;
	}

	::v-deep {
		.u-form {
			padding: 20rpx 30rpx;

			.selected-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-height: 80rpx;

				.u-icon {
					font-size: 38rpx;
					color: #9b9da0;
				}

				.selected-item {
					display: inline-block;
					border: 1rpx solid #d1d4d8;
					margin-right: 10rpx;
					border-radius: 10rpx;
					padding: 6rpx 10rpx;
					height: 50rpx;
					line-height: 34rpx;
					font-size: 25rpx;

					.u-icon {
						font-size: 32rpx;
						transform: translateY(2rpx);
						margin-left: 10rpx;
					}

				}
			}

			.business-list_wrapper {
				padding: 20rpx;

				.business-top {
					position: relative;
					font-size: 30rpx;

					.u-search {
						width: 80%;
						margin: 0 auto !important;
					}

					.icon {
						position: absolute;
						height: fit-content;
						right: 10rpx;
						top: 0;
						bottom: 0;
						margin: auto;
					}
				}

				.business-list {
					margin-top: 10rpx;
					height: 400rpx;
					padding-bottom: 30rpx;

					// overflow-y: auto;
					.u-checkbox {
						width: 100% !important;
						display: flex;
						justify-content: space-between;

						.u-checkbox__label {
							flex: 1;
							text-align: end;
							margin-right: 0 !important;
						}
					}
				}
			}
			.submit-btn{

				button{
					margin-top: 20rpx;
					background-color: #FFC300;
					color:white;
				}
			}
		}
	}
</style>
